<template>
  <div>
    <p class="title">查看</p>
    <div class="left">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <!-- 基本信息 -->
        <el-tab-pane label="基本信息" name="first">
          <div class="main">
            <div class="msg">
              <p>
                <span>手机号：</span>
                <span>1322222222222</span>
              </p>
              <p>
                <span>微信号：</span>
                <span>1322222222222</span>
              </p>
              <p>
                <span>是否认证：</span>
                <span>已认证</span>
              </p>
              <p>
                <span>发布数量：</span>
                <span>200</span>
              </p>
              <p>
                <span>我的钻石：</span>
                <span>200</span>
              </p>
              <p>
                <span>优惠券数量：</span>
                <span>2</span>
              </p>
              <p>
                <span>是否推荐：</span>
                <span>已推荐</span>
              </p>
              <p>
                <span>状态：</span>
                <span>正常</span>
              </p>
              <p>
                <span>最近登录</span>
                <span>2021/01/01 9:30</span>
              </p>
              <div class="tag-group">
                <span class="tag-group__title">标签：</span>
                <div class="tag">
                  <el-tag
                    v-for="item in items"
                    :key="item.label"
                    :type="item.type"
                    effect="dark"
                  >
                    {{ item.label }}
                  </el-tag>
                </div>
              </div>
              <div class="signature">
                <span>个性签名：</span>
                <div class="sign">
                  个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名
                </div>
              </div>
            </div>
            <div class="right">
              <img src="" alt="" />
              <p><span>用户名称：</span> <span>xxx</span></p>
              <p><span>性别：</span> <span>xxx</span></p>
              <p><span>出生日期：</span> <span>xx</span></p>
              <p><span>注册日期：</span> <span>xx</span></p>
            </div>
          </div>
        </el-tab-pane>
        <!-- 优惠券 -->
        <el-tab-pane label="优惠券" name="second">
          <div class="state">
            <span>状态：</span>
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>

          <!-- 优惠券表格 -->
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            center
            :header-cell-style="{
              'text-align': 'center',
              ' background-Color': '#000',
            }"
          >
            <el-table-column
              type="index"
              width="50"
              label="序号"
              show-overflow-tooltip
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="num"
              label="订单号"
              width="120"
              show-overflow-tooltip
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              label="名称"
              width="120"
              show-overflow-tooltip
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="address"
              label="所属门店"
              width="180"
              show-overflow-tooltip
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="youxiaoqi"
              label="有效期"
              show-overflow-tooltip
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="quanma"
              label="消费券码"
              show-overflow-tooltip
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="price"
              label="价格"
              show-overflow-tooltip
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="gettime"
              label="领取时间"
              show-overflow-tooltip
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="state"
              label="状态"
              show-overflow-tooltip
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="hexiaotime"
              label="核销时间"
              show-overflow-tooltip
              align="center"
            >
            </el-table-column>
            <el-table-column label="操作" show-overflow-tooltip align="center">
              <el-button type="text" @click="dialogVisible = true"
                >查看</el-button
              >
            </el-table-column>
          </el-table>
          <!-- 弹出框 -->

          <el-dialog
            title="查看"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose"
          >
            <p>
              <span>名称：</span>
              <span>按摩诊疗优惠券</span>
            </p>
            <p>
              <span>有效期：</span>
              <span>2021/01/03-2021/03/01</span>
            </p>
            <p>
              <span>消费券码：</span>
              <span>SD123456</span>
            </p>
            <p>
              <span>价格：</span>
              <span>100元</span>
            </p>
            <p>
              <span>领取时间：</span>
              <span>2021/03/16</span>
            </p>
            <p>
              <span>状态：</span>
              <span>待核销</span>
            </p>
            <div class="text">
              <div class="text1">使用说明：</div>
              <div class="text2">
                使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明
              </div>
            </div>
          </el-dialog>

          <Page
            :total="total"
            :PageNumber.sync="PageNumber"
            :PageSize.sync="PageSize"
            @current-change="changeCurrentPage"
            @size-change="handleSizeChange"
          >
          </Page>
        </el-tab-pane>
        <el-tab-pane label="动态发布" name="third">
          <div>
            <Dynamic />
          </div>
        </el-tab-pane>
        <el-tab-pane label="钱包" name="fourth">
          <div class="mesg">
            <p>
              <span>剩余钻石余额：</span>
              <span>100000</span>
            </p>
            <p>
              <span>当前可提现：</span>
              <span>1400</span>
            </p>
            <p>
              <span>收入总数：</span>
              <span>100000</span>
            </p>
            <p>
              <span>支出总数：</span>
              <span>100000</span>
            </p>
            <p>
              <span>充值总数：</span>
              <span>100000</span>
            </p>
          </div>
          <div class="date">
            <span>时间：</span>
            <el-date-picker
              v-model="value1"
              type="daterange"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
          <div class="tab">
            <el-table :data="tableData2" style="width: 100%">
              <el-table-column type="index" label="序号" width="50">
              </el-table-column>
              <el-table-column prop="balance" label="钻石余额" width="100">
              </el-table-column>
              <el-table-column prop="name" label="名称" width="100">
              </el-table-column>
              <el-table-column prop="income" label="收入（100）">
              </el-table-column>
              <el-table-column prop="expend" label="支出（100）">
              </el-table-column>
              <el-table-column prop="pay" label="充值（100）">
              </el-table-column>
              <el-table-column prop="fade" label="提现（100）">
              </el-table-column>
              <el-table-column prop="canpay" label="可提现钻石">
              </el-table-column>
              <el-table-column prop="time" label="时间"> </el-table-column>
            </el-table>
            <Page
              :total="total"
              :PageNumber.sync="PageNumber"
              :PageSize.sync="PageSize"
              @current-change="changeCurrentPage"
              @size-change="handleSizeChange"
            >
            </Page>
          </div>
        </el-tab-pane>
        <el-tab-pane label="关注" name="five">
          <div>
            <span>用户类型：</span>
            <el-select v-model="value3" placeholder="请选择">
              <el-option
                v-for="item in options3"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div>
            <div class="tab">
              <el-table :data="tableData3" border style="width: 100%">
                <el-table-column type="index" label="序号" width="50">
                </el-table-column>

                <el-table-column prop="name" label="用户昵称" width="100">
                </el-table-column>
                <el-table-column prop="phone" label="手机号"> </el-table-column>
                <el-table-column prop="dynum" label="动态量"> </el-table-column>
                <el-table-column prop="fans" label="粉丝"> </el-table-column>
                <el-table-column prop="type" label="用户类型">
                </el-table-column>

                <el-table-column prop="time" label="操作时间">
                </el-table-column>
              </el-table>
              <Page
                :total="total"
                :PageNumber.sync="PageNumber"
                :PageSize.sync="PageSize"
                @current-change="changeCurrentPage"
                @size-change="handleSizeChange"
              >
              </Page>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="粉丝" name="six">
          <div>
            <span>是否互关：</span>
            <el-select v-model="value3" placeholder="请选择">
              <el-option
                v-for="item in options3"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div>
            <div class="tab">
              <el-table :data="tableData4" border style="width: 100%">
                <el-table-column type="index" label="序号" width="50">
                </el-table-column>

                <el-table-column prop="name" label="用户昵称" width="100">
                </el-table-column>
                <el-table-column prop="phone" label="手机号"> </el-table-column>
                <el-table-column prop="dynum" label="动态量"> </el-table-column>
                <el-table-column prop="fans" label="粉丝"> </el-table-column>
                <el-table-column prop="type" label="用户类型">
                </el-table-column>

                <el-table-column prop="time" label="操作时间">
                </el-table-column>
              </el-table>
              <Page
                :total="total"
                :PageNumber.sync="PageNumber"
                :PageSize.sync="PageSize"
                @current-change="changeCurrentPage"
                @size-change="handleSizeChange"
              >
              </Page>
            </div>
          </div>
        </el-tab-pane>
        <!-- 订单 -->
        <el-tab-pane label="订单" name="seven">
          <el-tabs v-model="activeName2" @tab-click="handleClick2">
            <el-tab-pane label="商城订单" name="indentfirst">
              <div class="allpay">
                <p>
                  <span>付费总金额：</span>
                  <span>50000元</span>
                </p>
                <p>
                  <span>钻石抵扣：</span>
                  <span>-500元</span>
                </p>
              </div>
              <div>
                <div class="tab">
                  <el-table :data="tableData5" border style="width: 100%">
                    <el-table-column type="index" label="序号" width="50">
                    </el-table-column>

                    <el-table-column
                      prop="ordernum"
                      label="订单编号"
                      width="100"
                    >
                    </el-table-column>
                    <el-table-column prop="name" label="优惠券名称">
                    </el-table-column>
                    <el-table-column prop="adress" label="所属门店">
                    </el-table-column>
                    <el-table-column prop="cantime" label="有效期">
                    </el-table-column>
                    <el-table-column prop="total" label="总金额">
                    </el-table-column>

                    <el-table-column prop="delprice" label="钻石抵扣">
                    </el-table-column>
                    <el-table-column prop="price" label="实际金额">
                    </el-table-column>
                    <el-table-column prop="paytime" label="付款时间">
                    </el-table-column>
                    <el-table-column prop="canceltime" label="核销时间">
                    </el-table-column>
                    <el-table-column prop="state" label="状态">
                    </el-table-column>
                  </el-table>
                  <Page
                    :total="total"
                    :PageNumber.sync="PageNumber"
                    :PageSize.sync="PageSize"
                    @current-change="changeCurrentPage"
                    @size-change="handleSizeChange"
                  >
                  </Page>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="活动订单" name="indentsecond">
              <div class="allpay">
                <p>
                  <span>付费总金额：</span>
                  <span>50000元</span>
                </p>
                <p>
                  <span>钻石抵扣：</span>
                  <span>-500元</span>
                </p>
              </div>
              <div>
                <div class="tab">
                  <el-table :data="tableData6" border style="width: 100%">
                    <el-table-column type="index" label="序号" width="50">
                    </el-table-column>

                    <el-table-column
                      prop="ordernum"
                      label="订单编号"
                      width="100"
                    >
                    </el-table-column>
                    <el-table-column prop="name" label="活动名称">
                    </el-table-column>
                    <el-table-column prop="actime" label="活动时间">
                    </el-table-column>

                    <el-table-column prop="total" label="商品总金额">
                    </el-table-column>

                    <el-table-column prop="delprice" label="钻石抵扣">
                    </el-table-column>
                    <el-table-column prop="price" label="支付金额">
                    </el-table-column>
                    <el-table-column prop="paytime" label="付款时间">
                    </el-table-column>

                    <el-table-column prop="state" label="状态">
                    </el-table-column>
                  </el-table>
                  <Page
                    :total="total"
                    :PageNumber.sync="PageNumber"
                    :PageSize.sync="PageSize"
                    @current-change="changeCurrentPage"
                    @size-change="handleSizeChange"
                  >
                  </Page>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
        <!-- 活动作品 -->
        <el-tab-pane label="活动作品" name="eighth">
          <div>
            <span>状态：</span>
            <el-select v-model="value4" placeholder="请选择">
              <el-option
                v-for="item in options4"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div>
            <div class="tab">
              <el-table :data="tableData7" border style="width: 100%">
                <el-table-column type="index" label="序号"> </el-table-column>

                <el-table-column prop="acname" label="活动名称">
                </el-table-column>
                <el-table-column prop="aname" label="作品名称">
                </el-table-column>
                <el-table-column prop="actime" label="活动时间">
                </el-table-column>
                <el-table-column prop="state" label="状态"> </el-table-column>
              </el-table>
              <Page
                :total="total"
                :PageNumber.sync="PageNumber"
                :PageSize.sync="PageSize"
                @current-change="changeCurrentPage"
                @size-change="handleSizeChange"
              >
              </Page>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import Page from "../../components/page.vue";
import Dynamic from "../../components/Dynamic.vue";
export default {
  components: {
    Page,
    Dynamic,
  },
  data() {
    return {
      value1: "",
      // 弹出框
      dialogVisible: false,
      // 分页
      PageNumber: 1,
      PageSize: 20,
      total: 50,
      // 优惠券状态数据
      tableData: [
        {
          num: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          youxiaoqi: "777",
          quanma: "222",
          price: "100",
          gettime: "2021/03/16",
          state: "已核销",
          hexiaotime: "2021/01/01",
        },
        {
          num: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          youxiaoqi: "777",
          quanma: "222",
          price: "100",
          gettime: "2021/03/16",
          state: "已核销",
          hexiaotime: "2021/01/01",
        },
        {
          num: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          youxiaoqi: "777",
          quanma: "222",
          price: "100",
          gettime: "2021/03/16",
          state: "已核销",
          hexiaotime: "2021/01/01",
        },
        {
          num: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          youxiaoqi: "777",
          quanma: "222",
          price: "100",
          gettime: "2021/03/16",
          state: "已核销",
          hexiaotime: "2021/01/01",
        },
      ],
      tableData2: [
        {
          balance: "100",
          name: "王小虎",
          income: "100",
          expend: "100",
          pay: "100",
          fade: "1000",
          canpay: "100",
          time: "2021/02/02",
        },
        {
          balance: "100",
          name: "王小虎",
          income: "100",
          expend: "100",
          pay: "100",
          fade: "1000",
          canpay: "100",
          time: "2021/02/02",
        },
        {
          balance: "100",
          name: "王小虎",
          income: "100",
          expend: "100",
          pay: "100",
          fade: "1000",
          canpay: "100",
          time: "2021/02/02",
        },
        {
          balance: "100",
          name: "王小虎",
          income: "100",
          expend: "100",
          pay: "100",
          fade: "1000",
          canpay: "100",
          time: "2021/02/02",
        },
      ],
      //   关注
      tableData3: [
        {
          name: "王小虎",
          phone: "1322222222222",
          dynum: "100",
          fans: "100",
          type: "1000",
          time: "2021/02/02",
        },
        {
          name: "王小虎",
          phone: "1322222222222",
          dynum: "100",
          fans: "100",
          type: "1000",
          time: "2021/02/02",
        },
        {
          name: "王小虎",
          phone: "1322222222222",
          dynum: "100",
          fans: "100",
          type: "1000",
          time: "2021/02/02",
        },
        {
          name: "王小虎",
          phone: "1322222222222",
          dynum: "100",
          fans: "100",
          type: "1000",
          time: "2021/02/02",
        },
      ],
      //   粉丝
      tableData4: [
        {
          name: "王小虎",
          phone: "1322222222222",
          dynum: "100",
          fans: "100",
          type: "是",
          time: "2021/02/02",
        },
        {
          name: "王小虎",
          phone: "1322222222222",
          dynum: "100",
          fans: "100",
          type: "是",
          time: "2021/02/02",
        },
        {
          name: "王小虎",
          phone: "1322222222222",
          dynum: "100",
          fans: "100",
          type: "是",
          time: "2021/02/02",
        },
        {
          name: "王小虎",
          phone: "1322222222222",
          dynum: "100",
          fans: "100",
          type: "是",
          time: "2021/02/02",
        },
      ],
      //   订单
      tableData5: [
        {
          ordernum: "123123",
          name: "tom",
          adress: "100",
          cantime: "100",
          total: "100",
          delprice: "100",
          price: "0",
          paytime: "2021",
          canceltime: "2021",

          state: "已完成",
        },
        {
          ordernum: "123123",
          name: "tom",
          adress: "100",
          cantime: "100",
          total: "100",
          delprice: "100",
          price: "0",
          paytime: "2021",
          canceltime: "2021",

          state: "已完成",
        },
        {
          ordernum: "123123",
          name: "tom",
          adress: "100",
          cantime: "100",
          total: "100",
          delprice: "100",
          price: "0",
          paytime: "2021",
          canceltime: "2021",

          state: "已完成",
        },
        {
          ordernum: "123123",
          name: "tom",
          adress: "100",
          cantime: "100",
          total: "100",
          delprice: "100",
          price: "0",
          paytime: "2021",
          canceltime: "2021",
          state: "已完成",
        },
      ],
      tableData6: [
        {
          ordernum: "123123",
          name: "tom",
          actime: "100",
          cantime: "100",
          total: "100",
          delprice: "100",
          price: "0",
          paytime: "2021",
          canceltime: "2021",

          state: "已完成",
        },
        {
          ordernum: "123123",
          name: "tom",
          actime: "100",
          cantime: "100",
          total: "100",
          delprice: "100",
          price: "0",
          paytime: "2021",
          canceltime: "2021",

          state: "已完成",
        },
        {
          ordernum: "123123",
          name: "tom",
          actime: "100",
          cantime: "100",
          total: "100",
          delprice: "100",
          price: "0",
          paytime: "2021",
          canceltime: "2021",

          state: "已完成",
        },
        {
          ordernum: "123123",
          name: "tom",
          actime: "100",
          cantime: "100",
          total: "100",
          delprice: "100",
          price: "0",
          paytime: "2021",
          canceltime: "2021",
          state: "已完成",
        },
      ],
      //   活动
      tableData7: [
        {
          acname: "王小虎",
          aname: "1322222222222",
          actime: "100",

          state: "待审核",
        },
        {
          acname: "王小虎",
          aname: "1322222222222",
          actime: "100",

          state: "待审核",
        },
        {
          acname: "王小虎",
          aname: "1322222222222",
          actime: "100",

          state: "待审核",
        },
        {
          acname: "王小虎",
          aname: "1322222222222",
          actime: "100",

          state: "待审核",
        },
      ],
      options: [
        {
          value: "全部",
          label: "全部",
        },
        {
          value: "待支付",
          label: "待支付",
        },
        {
          value: "已完成",
          label: "已完成",
        },
        {
          value: "已过期",
          label: "已过期",
        },
      ],
      value: "",
      // 关注
      options3: [
        {
          value: "全部",
          label: "全部",
        },
        {
          value: "待支付",
          label: "待支付",
        },
        {
          value: "已完成",
          label: "已完成",
        },
        {
          value: "已过期",
          label: "已过期",
        },
      ],
      value3: "",
      options4: [
        {
          value: "全部",
          label: "全部",
        },
        {
          value: "待审核",
          label: "待审核",
        },
        {
          value: "审核通过",
          label: "审核通过",
        },
        {
          value: "审核未通过",
          label: "审核未通过",
        },
      ],
      value4: "",
      //
      activeName: "first",
      activeName2: "indentfirst",
      //   标签
      items: [
        { type: "info", label: "摄影" },
        { type: "info", label: "彩妆" },
        { type: "info", label: "宠物" },
        { type: "info", label: "情感" },
        { type: "info", label: "美食" },
        { type: "info", label: "育儿" },
        { type: "info", label: "职场" },
        { type: "info", label: "互联网" },
      ],
    };
  },
  methods: {
    handleClose(done) {
      done();
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleClick2(tab, event) {
      console.log(tab, event);
    },

    //改变当前页数
    changeCurrentPage(val) {
      console.log(val);
    },
    //改变每页显示条数
    handleSizeChange(val) {
      console.log(val);
    },
    //   推荐
    recommend() {
      console.log(this.multipleSelection, 999);
      this.$confirm(
        `是否推荐该${this.multipleSelection.length}位用户?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.$message({
            type: "success",
            message: "推荐成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消推荐",
          });
        });
    },
    //  查看
    // ck() {
    //   this.$router.push("/Home/NormalUser");
    // },
  },
};
</script>
<style lang="scss" scoped>
.title {
  margin-top: -10px;
  font-size: 14px;
}
.main {
  display: flex;
  justify-content: space-between;
}
.left {
  //   width: 850px;
  padding: 40px;
  //   display: flex;
  .msg {
    display: flex;
    flex-wrap: wrap;
    p {
      width: 250px;
    }
    .tag-group {
      width: 850px;
      display: flex;
      .tag {
        width: 600px;
        margin-left: 20px;
        .el-tag {
          margin: 5px;
          width: 100px;
          text-align: center;
        }
      }
    }
  }
}
.signature {
  margin-top: 20px;
  display: flex;
  .sign {
    width: 700px;
  }
}
.right {
  img {
    width: 178px;
    height: 178px;
    border-radius: 50%;
    background-color: #ccc;
  }
}
.state {
  margin-bottom: 20px;
}
.el-dialog {
  p {
    :nth-child(1) {
      display: inline-block;
      width: 100px;
      text-align: right;
      margin-right: 20px;
    }
  }
}
.text {
  display: flex;
  justify-content: space-between;
  .text1 {
    width: 100px;
    text-align: right;
  }
  .text2 {
    width: 293px;
  }
}
.mesg {
  display: flex;
  justify-content: space-between;
  background-color: rgb(242, 242, 242);

  p {
    width: 300px;
  }
}
.date {
  margin-top: 20px;
}
.tab {
  margin-top: 20px;
}
/deep/.el-tabs__nav-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #fff;
  z-index: 1;
}
.allpay {
  display: flex;
  background-color: rgb(242, 242, 242);
  height: 40px;
  line-height: 40px;
  p {
    margin: 0 20px;
    span {
      font-size: 18px;
      font-weight: 800;
    }
  }
}
</style>